<template>
	<view class="container">
		<view class="profile-header">
			<view class="avatar-container">
				<view class="avatar">
					<text>{{userInitial}}</text>
				</view>
			</view>
			<view class="user-info">
				<text class="username">{{username}}</text>
			</view>
		</view>
		
		<view class="menu-list">
			<view class="menu-item" @tap="goToPage('/pages/index/index')">
				<view class="icon">📅</view>
				<text class="title">我的日程</text>
				<text class="arrow">›</text>
			</view>
			<view class="menu-item" @tap="goToPage('/pages/tasks/tasks')">
				<view class="icon">📝</view>
				<text class="title">我的任务</text>
				<text class="arrow">›</text>
			</view>
			<view class="menu-item" @tap="showNotImplemented('统计分析')">
				<view class="icon">📊</view>
				<text class="title">统计分析</text>
				<text class="arrow">›</text>
			</view>
		</view>
		
		<view class="menu-list">
			<view class="menu-item" @tap="showSettings">
				<view class="icon">⚙️</view>
				<text class="title">设置</text>
				<text class="arrow">›</text>
			</view>
			<view class="menu-item" @tap="showNotImplemented('反馈与帮助')">
				<view class="icon">💬</view>
				<text class="title">反馈与帮助</text>
				<text class="arrow">›</text>
			</view>
			<view class="menu-item" @tap="showAbout">
				<view class="icon">ℹ️</view>
				<text class="title">关于</text>
				<text class="arrow">›</text>
			</view>
		</view>
		
		<view class="logout-button" @tap="logout">
			<text>退出登录</text>
		</view>
		
		<!-- 设置弹窗 -->
		<uni-popup ref="settingsPopup" type="center">
			<view class="popup-content settings-popup">
				<view class="popup-title">设置</view>
				
				<view class="settings-section">
					<view class="section-title">提醒设置</view>
					
					<view class="settings-item">
						<text class="settings-label">启用提醒</text>
						<switch :checked="settings.enableNotification" @change="toggleNotification" color="#007AFF" />
					</view>
					
					<view class="settings-item" v-if="settings.enableNotification">
						<text class="settings-label">提前提醒时间</text>
						<picker :value="settings.reminderTime" :range="reminderOptions" @change="onReminderTimeChange">
							<view class="picker-view">
								<text>{{reminderOptions[settings.reminderTime]}}</text>
								<text class="picker-arrow">▼</text>
							</view>
						</picker>
					</view>
					
					<view class="settings-item" v-if="settings.enableNotification">
						<text class="settings-label">提醒方式</text>
						<picker :value="settings.notificationType" :range="notificationTypes" @change="onNotificationTypeChange">
							<view class="picker-view">
								<text>{{notificationTypes[settings.notificationType]}}</text>
								<text class="picker-arrow">▼</text>
							</view>
						</picker>
					</view>
				</view>
				
				<view class="settings-section">
					<view class="section-title">界面设置</view>
					
					<view class="settings-item">
						<text class="settings-label">深色模式</text>
						<switch :checked="settings.darkMode" @change="toggleDarkMode" color="#007AFF" />
					</view>
				</view>
				
				<view class="popup-footer">
					<button @tap="closeSettings" class="btn-primary">确定</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import api from '../../utils/api.js';
	import uniPopup from '@dcloudio/uni-ui/lib/uni-popup/uni-popup.vue';
	import { reminderManager } from '../../utils/reminder.js';
	
	export default {
		components: {
			uniPopup
		},
		data() {
			return {
				username: '加载中...',
				userId: '',
				settings: {
					enableNotification: true,
					reminderTime: 1,
					notificationType: 1,
					darkMode: false,
					language: 'zh-CN'
				},
				reminderOptions: ['5分钟前', '15分钟前', '30分钟前', '1小时前', '1天前'],
				notificationTypes: ['仅弹窗', '声音+弹窗', '震动+弹窗']
			}
		},
		computed: {
			userInitial() {
				return this.username ? this.username.charAt(0).toUpperCase() : '?';
			}
		},
		onLoad() {
			this.loadUserInfo();
			this.loadSettings();
		},
		methods: {
			loadUserInfo() {
				// 从本地存储获取用户信息
				const username = uni.getStorageSync('username');
				const userId = uni.getStorageSync('userId');
				
				if (username) {
					this.username = username;
					this.userId = userId;
				} else {
					// 如果本地没有，从服务器获取
					api.getUserInfo()
						.then(response => {
							if (response.code === 200) {
								this.username = response.data.username;
								this.userId = response.data.id;
								
								// 存储到本地
								uni.setStorageSync('username', response.data.username);
								uni.setStorageSync('userId', response.data.id);
							}
						})
						.catch(error => {
							console.error('获取用户信息失败:', error);
						});
				}
			},
			goToPage(url) {
				// 由于使用了TabBar，这里应该使用switchTab而不是navigateTo
				if (url === '/pages/index/index' || url === '/pages/tasks/tasks') {
					console.log('切换到TabBar页面:', url);
					uni.switchTab({
						url: url,
						fail: (err) => {
							console.error('切换Tab失败:', err);
							// 如果switchTab失败，尝试使用reLaunch
							uni.reLaunch({
								url: url
							});
						}
					});
				} else {
					// 对于非TabBar页面，使用普通导航
					console.log('导航到非TabBar页面:', url);
					uni.navigateTo({
						url: url,
						fail: (err) => {
							console.error('导航失败:', err);
						}
					});
				}
			},
			logout() {
				uni.showModal({
					title: '确认退出',
					content: '确定要退出登录吗？',
					success: (res) => {
						if (res.confirm) {
							api.logout()
								.then(response => {
									// 无论成功与否，都清除本地登录信息
									uni.removeStorageSync('token');
									uni.removeStorageSync('userId');
									uni.removeStorageSync('username');
									
									uni.showToast({
										title: '已退出登录',
										icon: 'success'
									});
									
									// 跳转到登录页
									uni.reLaunch({
										url: '/pages/login/login'
									});
								})
								.catch(error => {
									console.error('退出登录失败:', error);
									
									// 即使API调用失败，也清除本地信息并跳转
									uni.removeStorageSync('token');
									uni.removeStorageSync('userId');
									uni.removeStorageSync('username');
									
									uni.reLaunch({
										url: '/pages/login/login'
									});
								});
						}
					}
				});
			},
			showNotImplemented(title) {
				uni.showToast({
					title: `${title}功能尚未实现`,
					icon: 'none'
				});
			},
			showAbout() {
				// 实现关于页面的逻辑
				console.log('打开关于页面');
			},
			loadSettings() {
				const storedSettings = uni.getStorageSync('settings');
				if (storedSettings) {
					this.settings = { ...this.settings, ...storedSettings };
				} else {
					// 如果没有存储设置，则使用默认设置并保存
					uni.setStorageSync('settings', this.settings);
				}
			},
			showSettings() {
				this.$refs.settingsPopup.open();
			},
			closeSettings() {
				this.$refs.settingsPopup.close();
			},
			toggleNotification(e) {
				this.settings.enableNotification = e.detail.value;
				this.saveSettings();
				
				// 如果关闭提醒，则清除所有提醒
				if (!this.settings.enableNotification) {
					reminderManager.clearAllReminders();
				} else {
					// 如果开启提醒，则重新初始化所有提醒
					reminderManager.initializeReminders();
				}
			},
			onReminderTimeChange(e) {
				this.settings.reminderTime = parseInt(e.detail.value);
				this.saveSettings();
				
				// 重新初始化提醒以应用新的提醒时间
				if (this.settings.enableNotification) {
					reminderManager.clearAllReminders();
					reminderManager.initializeReminders();
				}
			},
			onNotificationTypeChange(e) {
				this.settings.notificationType = parseInt(e.detail.value);
				this.saveSettings();
			},
			toggleDarkMode(e) {
				this.settings.darkMode = e.detail.value;
				this.saveSettings();
				
				// 应用深色模式
				if (this.settings.darkMode) {
					// 实现深色模式的逻辑
				} else {
					// 实现浅色模式的逻辑
				}
			},
			saveSettings() {
				uni.setStorageSync('settings', this.settings);
			}
		}
	}
</script>

<style>
	.container {
		flex: 1;
		display: flex;
		flex-direction: column;
		padding: 20rpx;
		background-color: #f9f9f9;
	}
	
	.profile-header {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 60rpx 0;
		background-color: #fff;
		border-radius: 20rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
	}
	
	.avatar-container {
		margin-bottom: 30rpx;
	}
	
	.avatar {
		width: 150rpx;
		height: 150rpx;
		border-radius: 75rpx;
		background-color: #007AFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.avatar text {
		color: #fff;
		font-size: 60rpx;
		font-weight: bold;
	}
	
	.user-info {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.username {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}
	
	.menu-list {
		background-color: #fff;
		border-radius: 20rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
	}
	
	.menu-item {
		display: flex;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}
	
	.menu-item:last-child {
		border-bottom: none;
	}
	
	.icon {
		margin-right: 20rpx;
		font-size: 40rpx;
	}
	
	.title {
		flex: 1;
		font-size: 32rpx;
		color: #333;
	}
	
	.arrow {
		color: #999;
		font-size: 40rpx;
	}
	
	.logout-button {
		margin-top: 60rpx;
		padding: 30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		text-align: center;
		color: #FF3B30;
		font-size: 32rpx;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
	}
	
	/* 设置弹窗样式 */
	.settings-popup {
		width: 90%;
		max-width: 600rpx;
		max-height: 80vh;
		border-radius: 20rpx;
		overflow: hidden;
	}
	
	.settings-section {
		margin-bottom: 30rpx;
	}
	
	.section-title {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 20rpx;
		padding-bottom: 10rpx;
		border-bottom: 1px solid #eee;
	}
	
	.settings-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
		padding: 10rpx 0;
	}
	
	.settings-label {
		font-size: 30rpx;
		color: #333;
	}
	
	.picker-view {
		font-size: 30rpx;
		color: #007AFF;
		display: flex;
		align-items: center;
	}
	
	.picker-arrow {
		font-size: 24rpx;
		margin-left: 10rpx;
		color: #999;
	}
	
	.popup-footer {
		margin-top: 30rpx;
		display: flex;
		justify-content: center;
	}
	
	.popup-content {
		padding: 30rpx;
		background-color: #fff;
	}
	
	.popup-title {
		font-size: 34rpx;
		font-weight: bold;
		text-align: center;
		margin-bottom: 30rpx;
	}
	
	.btn-primary {
		background-color: #007AFF;
		color: white;
		border: none;
		border-radius: 8rpx;
		padding: 15rpx 40rpx;
	}
</style> 